<template>
  <div>
    <BigpicWidget
      bgurl="images/p_contact_01.jpeg"
      ch="联系我们"
      en="CONTACT US"
    ></BigpicWidget>
    <BreadCrum :listLeft="listLeft" :listRight="listRight"></BreadCrum>
    <div class="wrap_content">
      <div class="w_wrap">
        <p class="title">联系我们</p>
        <div class="content">
          <div class="c_left">
            <ul>
              <li>
                <div class="li_left"><span class="iconfont icon-gongsidianhua"></span></div>
                <div class="li_right">
                  <p>联系电话</p>
                  <p><a href="">0769-88686668 </a></p>
                  <p><a href="">8880 0028-118 </a></p>
                </div>
              </li>
              <li>
                <div class="li_left"><span class="iconfont icon-gongsiyouxiang"></span></div>
                <div class="li_right">
                  <p>电子邮箱</p>
                  <p>sdhr2005@163.com</p>
                </div>
              </li>
              <li>
                <div class="li_left"><span class="iconfont icon-gongsiyoubian"></span></div>
                <div class="li_right">
                  <p>传真：</p>
                  <p>0769-88686668</p>
                  <p><a href="">8880 0028-808 </a></p>
                </div>
              </li>
              <li>
                <div class="li_left"><span class="iconfont icon-gongsimingcheng"></span></div>
                <div class="li_right">
                  <p>公司地址</p>
                  <p>广东省东莞市南城区蛤旺路龙旺埔A区8号</p>
                </div>
              </li>
              <li>
                <div class="li_left"><span class="iconfont icon-gongsidizhi"></span></div>
                <div class="li_right">
                  <p>广东三鼎实业集团有限公司</p>
                  <p>广东三鼎实业集团有限公司</p>
                  <p>地址：广东省东莞市南城街道龙旺埔路一巷16号114室</p>
                  <p>邮箱：sand88686668@163.com</p>
                  <p>联系方式：<a href="">0769-88686668</a> | <a href="">8880 0028-118</a></p>
                </div>
              </li>
            </ul>
          </div>
          <div class="c_right">
            <img src="@/assets/images/rto2.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BreadCrum from '@/components/BreadCrum.vue'
import BigpicWidget from '@/components/BigpicWidget.vue'

export default {
  components: {
    BigpicWidget,
    BreadCrum
  },
  data () {
    return {
      listLeft: ['集团简介', '发展历程', '组织架构', '集团荣誉'],
      listRight: ['首页', '/', '联系我们']
    }
  }
}
</script>

<style lang="less" scoped>
li{
  list-style: none;
}
a {
  color: #000
}
.wrap_content {
  width: 100%;
  background: #f7f7f7;
  padding: 2vw 0;
}
.w_wrap {
  width: 1640px;
  margin: 20px auto;
}
.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c_left{
  flex: 1;
  background: #fff;
  padding: 30px 0;
}
.c_left>ul>li{
  display: flex;
}
.c_right{
  flex: 2;
  width: 100%;
  height: 100%;
  margin-left: 1%;
}
.c-right img {
  width: 100%;
  height: 100%;
}
.title{
  font-size: 30px;
  color: #333;
  font-weight: bolder;
}
.title::after{
  content: "";
  display: block;
  height: 0.5px;
  width: 100%;
  background-color: #e4e4e4;
  margin: 15px 0px;
}
.c_left>ul>li:first-child{
  align-items: flex-start;
}
.c_left>ul>li:not(:first-child){
  align-items: center;
  margin: 20px 0px;

}
.li_left>.iconfont{
  border-radius: 50%;
  font-size: 40px;
  background-color: #E60012;
  color: white;
}
.li_right{
  line-height: 25px;
  margin: 0px 20px;

}
.c_right>img{
  width: 100%;
}
</style>
